import React from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { Card, Descriptions, Divider, Button } from 'antd';

const JobDetailPage = () => {
  const { id } = useParams();
  const { state } = useLocation();
  const job = state?.job;

  if (!job) {
    return <div>没有找到该工作的信息</div>;
  }

  return (
    <Card 
      key={id} 
      title={job.title} 
      style={{ margin: '0 auto', marginTop: 50 }}
      // cover={<img alt="company logo" src={job.companyLogo} />} // 公司logo
    >
      <Descriptions title="工作详情" bordered>
        <Descriptions.Item label="薪资">{job.salary}</Descriptions.Item>
        <Descriptions.Item label="薪资结算时间">{job.norm}</Descriptions.Item>
        <Descriptions.Item label="工作经验要求">{job.experience}</Descriptions.Item>
        <Descriptions.Item label="地区">{job.location}</Descriptions.Item>
        <Descriptions.Item label="公司名称">{job.companyName}</Descriptions.Item>
        <Descriptions.Item label="联系人">{job.contactPerson}</Descriptions.Item>
        <Descriptions.Item label="联系电话">{job.contactPhone}</Descriptions.Item>
        <Descriptions.Item label="邮箱">{job.contactEmail}</Descriptions.Item>
        <Descriptions.Item label="描述">{job.description}</Descriptions.Item>
      </Descriptions>

      <Divider />

      <div style={{ textAlign: 'center' }}>
        <Button type="primary" style={{ marginRight: 16 }}>
          申请该工作
        </Button>
      </div>
    </Card>
  );
};

export default JobDetailPage;
